<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>网上购票</title>
<link rel="stylesheet" href="resources/css/frozen.css">
<link rel="stylesheet" href="resources/css/main.css">
<style>
.quntity {
    color: red;
	font-weight: bold;
}
#order-detail-table thead th, #order-detail-table tbody td {
	background-color: #fff;
	line-height: 35px;
}
</style>
<script src="resources/lib/zepto.min.js"></script>
<script src="resources/js/frozen.js"></script>
<script src="resources/js/config.js"></script>
<script src="resources/js/main.js"></script>

</head>
<body ontouchstart="">
	<header class="ui-header ui-header-positive ui-border-b">
		<i class="ui-icon-return" onclick="location='order.html'"></i>
		<h1>订单详情</h1>
	</header>
	<footer class="ui-footer ui-footer-btn">
		<ul id="footer" class="ui-tiled ui-border-t">
			<li data-href="index.html" class="ui-border-r">
				<div>查询购票</div>
			</li>
			<li data-href="order.html" class="ui-border-r">
				<div>订单查询</div>
			</li>
			<li data-href="member.html">
				<div>会员中心</div>
			</li>
		</ul>
	</footer>
	<section class="ui-container">
		<section class="ui-selector">
			<header>
				<h3>订单信息</h3>
			</header>
			<div class="ui-form ui-border-t">
				<form action="#">
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="order-id">订单号</label>
						<input id="order-id" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="operate-time">订购时间</label>
						<input id="operate-time" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="route-name">线路</label>
						<input id="route-name" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="bus-id">车次</label>
						<input id="bus-id" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="bus-date">乘车日期</label>
						<input id="bus-date" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="bus-start-time">发车时间</label>
						<input id="bus-start-time" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="status-name">订单状态</label>
						<input id="status-name" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="total-quantity">总人数</label>
						<input id="total-quantity" class="quntity" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="total-price">总金额</label>
						<input id="total-price" class="quntity" type="text" value="" readonly>
					</div>
					<div id="pass-container" class="ui-form-item ui-form-item-show ui-border-b" style="display: none;">
						<label for="pass">取票密码</label>
						<input id="pass" type="text" value="" readonly>
					</div>
				</form>
			</div>
			<section id="order-detail-container" style="display: none;">
				<header>
					<ul class="ui-row-flex">
						<li class="ui-col ui-flex ui-col ui-flex-pack-start">乘车人</li>
					</ul>
				</header>
				<table id="order-detail-table" class="ui-table ui-border-tb">
					<thead>
					</thead>
					<tbody>
					</tbody>
				</table>
			</section>
		</section>
		<br/>
	</section>
	
	<div id="loading" class="ui-loading-block hide">
		<div class="ui-loading-cnt">
			<i class="ui-loading-bright"></i>
			<p>努力加载中...</p>
		</div>
	</div>
<script>
// 检查登录状态
checkLogin();

(function (){
	/* -------------------- 根据sessionStorage中的值，初始化界面 -------------------- */

	// 根据系统参数，判断是否实名售票
	if(!!appConfig.realNameSell) {
		$("#order-detail-container").show();
	}
	
	// 查询并加载订单内容
	showLoading("#loading");
	ajax({
		url: appConfig.baseUrl + "/BusTicketInfo.go",
		data: {
			method: "queryPayTime",
			orderid: sessionStorage.orderId
		},
		success: function(data) {
			hideLoading("#loading");
			
			if(!!data.rows) {
				if(data.rows.length>0) {
					// 加载订单信息
					var orderInfo = data.rows[0];
					$("#order-id").val(orderInfo.OrderId);
					$("#operate-time").val(orderInfo.OperatorTime);
					$("#route-name").val(orderInfo.SellStationName + ' - ' + orderInfo.EndStationName);
					$("#bus-id").val(orderInfo.BusId);
					
					$("#bus-date").val(orderInfo.BusTime.substring(0, 10));
					$("#bus-start-time").val(orderInfo.BusTime.substring(11, 16));
					
					if(sessionStorage.orderType==1) {
						$("#pass").show();
						$("#pass").val(sessionStorage.Pass);
						$("#status-name").val("已支付");
					} else if (sessionStorage.orderType==3) {
						$("#pass").hide();
						$("#status-name").val("已作废");
					}
					
					// 显示乘车人
					var totalQuantity = 0;
					var totalPrice = 0;
					
					$("#order-detail-table thead").append(
						"<tr><th>姓名</th><th>票价</th><th>座位号</th>" + 
						"<th " + (appConfig.takeChildren ? "" : "style='display: none;'") + ">携童</th>" +
						"</tr>"
					);
					
					for(var i=0; i<data.rows.length; i++) {
						var record = data.rows[i];
						var price = 0;
						if(record.TicketType==1) {
							price = record.FullPrice
						} else if (record.TicketType==2) {
							price = record.HalfPrice
						}
						totalPrice += parseFloat(price);
						totalQuantity += 1;
						
						$("#order-detail-table tbody").append(
							"<tr>" +
								"<td>" + record.LinkmanName + "</td>" +
								"<td>" + price + "</td>" +
								"<td>" + record.SeatNo + "</td>" +
								"<td " + (appConfig.takeChildren ? "" : "style='display: none;'") + ">" + (record.IsChildren=='1' ? '是' : '否') + "</td>" +
							"</tr>"
						);
					}
					
					$("#total-quantity").val(totalQuantity);
					$("#total-price").val(Math.floor(totalPrice*100)/100);
				}
			} else {
				$("#empty-text").html("订单加载失败，请重试");
				$("#empty-text").show();
			}
		}
	});
	
	// 底部主菜单初始化
	initFooter("#footer");
})();
</script>
</body>
</html>